<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/basicSalary'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名（工号）">
            <el-input v-model="paging.staff_name" type="text"></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column label="门店" min-width="150">
            <template slot-scope="scope" v-if="scope.row.store.title">
              {{ scope.row.store.title }}
            </template>
          </el-table-column>
          <el-table-column label="入职日期" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.into_time | parseTime("{y}-{m}-{d}") }}
            </template>
          </el-table-column>
          <el-table-column label="姓名（工号）" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.name }} ({{ scope.row.number }})
            </template>
          </el-table-column>
          <el-table-column label="岗位" min-width="150">
            <template slot-scope="scope" v-if="scope.row.position.title">
              {{ scope.row.position.title }}
            </template>
          </el-table-column>
          <el-table-column prop="base_wage" label="底薪（元）" min-width="150">
          </el-table-column>
          <el-table-column prop="create_time" label="提成方式" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.royalty">{{
                scope.row.royalty.title
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="薪资单类别" min-width="150">
            <template slot-scope="scope" v-if="scope.row.salaryCate">
              {{ scope.row.salaryCate.title }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="操作" align="right">
            <template slot-scope="scope">
              <span @click="setRow(scope.row)" class="tab-table-text"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <el-dialog
      title="底薪信息"
      :visible.sync="dialogFormVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="110px" v-if="details.id">
        <el-form-item label="门店：">
          <span>{{ details.store.title }}</span>
        </el-form-item>
        <el-form-item label="入职日期：">
          <span> {{ details.into_time | parseTime("{y}-{m}-{d}") }}</span>
        </el-form-item>
        <el-form-item label="姓名（编号）：">
          <span>{{ details.name }}（{{ details.number }}）</span>
        </el-form-item>
        <el-form-item label="底薪：" class="price">
          <el-input
            type="text"
            v-model="details.base_wage"
            style="width: 150px"
          ></el-input>
          <span>元</span>
        </el-form-item>
        <el-form-item label="薪资模板：">
          <el-select
            v-model="details.salary_cate_id"
            placeholder="请选择"
            style="width: 220px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogFormVisible = false;
            handleClose;
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogFormVisible: false,
      paging: {
        page: 1,
        total: 0,
        limit: 10,
        store_id: "",
        staff_name: "",
      },
      form: {
        staff_id: "",
        base_wage: "",
        salary_cate_id: "",
      },
      tableData: [],
      storeList: [],
      details: {},
      typeList: [],
    };
  },
  created() {
    this.getAllStoreList();
    this.repairGetList();
    this.getSalaryCate();
  },
  methods: {
    handleClose(dom) {
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      dom && dom();
    },
    setRow(ele) {
      this.details = ele;
      console.log(ele, "dddddddddddd");
      this.dialogFormVisible = true;
    },
    // 获取全部类别
    async getSalaryCate() {
      let { code, data } = await this.$Http.getSalaryCate({ is_all: 1 });
      if (code) {
        this.typeList = data;
      }
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    // 编辑
    async submit() {
      this.form = {
        staff_id: this.details.id,
        base_wage: this.details.base_wage,
        salary_cate_id: this.details.salary_cate_id,
      };
      let { code, data } = await this.$Http.setBaseSalary(this.form);
      if (code) {
        this.$message.success("编辑成功");
        this.handleCurrentChange(1);
        this.dialogFormVisible = false;
        this.form = this.$options.data().form;
      }
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getBaseSalary(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.total = data.total;
      }
    },
    // async setRow(type, row) {
    //   this.utils.goUrl("/basicSalary?type=" + type);
    // },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.handleCurrentChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.price {
  ::v-deep {
    .el-input {
      width: 350px;
      margin-right: 20px;
    }
  }
}
</style>